<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>



    <div id="mydiv">
        <el-upload
                class="upload-demo"
                action="http://localhost:8080/file/upload"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="1"
                :on-exceed="handleExceed"
                :file-list="fileList"
                :on-success="handleSuccess"
                :before-upload="handleBeforeUpload"

        >
            <el-button size="small"  @click="prepare" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>



        <h1>文件列表</h1>
        <template>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="编号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="fileName"
                        label="文件名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="文件类型"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="上传时间"
                        width="180">
                </el-table-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <!--
                             TODO: 修改和删除
                         -->
                        <el-link :href="scope.row.httpUrl" type="primary">查看文件</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </template>

        <div class="block">
            <span class="demonstration">完整功能</span>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.pageNum"
                    :page-sizes="[5, 10, 20]"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
    </div>
</body>
<script>
    new Vue({
        el:"#mydiv",
        data:{
            pagination:{
                pageNum:1,
                pageSize:5,
                total:0
            },
            fileList: [


                        ],
            tableData: []
        },
        created:function () {
            //查询文件信息
            this.findFileByPage();
        },
        methods: {
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            handleSuccess(response, file, fileList){
                this.$message({
                    showClose: true,
                    message: '文件上传成功',
                    type: 'success'
                });

                this.findFileByPage();
            },
            prepare:function () {
                this.fileList=[];
            },
            findFileByPage:function () {

                axios.get("file/findFileByPage",{"params":this.pagination})
                    .then(response=>{
                        this.tableData = response.data.data.list;
                        this.pagination.total = response.data.data.total;
                    })

            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pagination.pageSize=val;
                this.findFileByPage();

            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pagination.pageNum=val;
                this.findFileByPage();
            }
        }
    });
</script>
</html>